<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>后台--文章管理</title>
    <link rel="stylesheet" type="text/css" href="<?php echo isset($skin)?$skin:"";?>images/style.css" />
    <base target="_self"/>

    <script src='<?php echo isset($skin)?$skin:"";?>js/jquery.min.js'></script>
    <script type="text/javascript" src="<?php echo isset($skin)?$skin:"";?>js/jquery.form.min.js"></script>
    <script type="text/javascript" src="<?php echo isset($skin)?$skin:"";?>js/dist/dialog-min.js"></script>
    <script src="<?php echo isset($skin)?$skin:"";?>js/admin.js"></script>
    <script type="text/javascript">
        <!--
        $(document).ready(function () {
            $('.new_table tbody tr:even').addClass('h'); //奇偶变色，添加样式
        });
        //-->
    </script>

</head>
<body>
<div class="hh6"></div>
<script charset="utf-8" src="../kedit/kindeditor-min.js"></script>
<script type="text/javascript">
    $(function(){
        $(".nav a").click(function(){
            $(this).addClass("current").siblings().removeClass("current");
            $(".new_table").eq($(this).index()).removeClass("hidden").siblings(".new_table").addClass("hidden");
        });
        $("#set").click(function(){
            $(".hidden").show("slow");
        });
    });
</script>
<script type="text/javascript" charset="UTF-8" src="<?php echo isset($skin)?$skin:"";?>/js/validate.js"></script>
<script type="text/javascript" charset="UTF-8" src="<?php echo isset($skin)?$skin:"";?>js/artTemplate.js"></script><script type="text/javascript" charset="UTF-8" src="/runtime/_systemjs/artTemplate/artTemplate-plugin.js"></script>

<div class="mbx"><span class="fl"><a href="?">子不语商城管理中心</a>--<?php echo isset($title)?$title:"";?> </span><span class="fr"><a href="?c=<?php echo isset($classname)?$classname:"";?>&a=info">规格列表</a></span> </div>
<form method="Post" action="?c=<?php echo isset($classname)?$classname:"";?>" name="k_form">
    <table class="new_table" width="99%" border="0" align="center" cellpadding="0" cellspacing="0">
        <thead> <tr class="n_bt"><td colspan="5" align="center">爱不语商城系统</td></tr>
        <tr><th colspan='5' class="thbt">【<?php echo isset($title)?$title:"";?>】</th></tr>
        </thead>
        <tbody>
        <tr>
            <td width="13%" height="30" align="right">规格名称：</td>
            <td width="87%"><input class="normal" name="model_name" id="model_name" type="text" pattern="required" alt="模型名称不能为空！" value="<?php echo isset($name)?$name:"";?>"  /> <label>* 规格名称（必填）</label>
            </td>
        </tr>
        <tr>
            <td width="13%" height="30" align="right">显示备注：</td>
            <td width="87%"><input class="normal" type="text" name="note" value="<?php echo isset($note)?$note:"";?>" /></td>
        </tr>
        <tr>
            <td align="right">添加规格属性：</td>
            <td><button class="btn" id="specAddButton" type="button"><span class="add">添加扩展属性</span></button></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <table class='border_table' cellpadding="0" cellspacing="0" width='100%'>
                    <thead>
                    <tr>
                        <th>规格值</th>
                        <th>操作</th>
                    </tr>

                    </thead>
                    <tbody id='spec_box'>
                    <?php if(is_array($attr))  foreach($attr as $v) { ?>
                    <tr class='td_c'>
                        <td>
                            <input type="text" class="normal" name="value[]" value="<?php echo isset($v)?$v:"";?>" pattern="required" />

                        </td>
                        <td>
                            <img class="operator" src="<?php echo isset($skin)?$skin:"";?>/images/icon_asc.gif" alt="向上" />
                            <img class="operator" src="<?php echo isset($skin)?$skin:"";?>/images/icon_desc.gif" alt="向下" />
                            <img class="operator" src="<?php echo isset($skin)?$skin:"";?>/images/icon_del.gif" alt="删除" />
                        </td>
                    </tr>
                    <?php }?>
                    </tbody>
                </table>

            </td>
        </tr>


        <tr>
            <td height="35" colspan="2" align="center" ><input name="into_wz" id="submit" class="button" type="submit" value="提交" />
                &nbsp;<input name="" type="reset" class="button" value="重置" />
                <input name="id" type="hidden" value="<?php echo isset($id)?$id:"";?>" />
                <input name="a" type="hidden" value="update" />
            </td>
        </tr>
</tbody>
        </table>

</form>
<script type='text/javascript'>
    //规格图片上传回调函数
    function updatePic(indexValue,srcValue)
    {
        $('#spec_box tr:eq('+indexValue+') td:eq(0) .imgbox').html('<img src="/'+srcValue+'" class="img_border" width="50px" height="50px"  />');
        $('#spec_box tr:eq('+indexValue+') td:eq(0) :hidden').val(srcValue);
        art.dialog({id:'uploadIframe'}).close();
    }

    //规格图片html
    function getPicHtml(dataValue)
    {
        var srcHtml = '';
        if(dataValue)
            var srcHtml = '<img src="/'+dataValue+'" class="img_border" width="50px" height="50px" />';

        return '<div class="imgbox">'+srcHtml+'</div><input type="hidden" name="value[]" value="'+(dataValue?dataValue:"")+'" /><button type="button" class="btn"><span>选择图片</span></button>'
    }

    //规格值html
    function getValHtml(dataValue)
    {
        if(dataValue == undefined)
            dataValue = '';
        return '<input class="normal" type="text" name="value[]" value="'+(dataValue?dataValue:"")+'" pattern="required" alt="填写规格值" />';
    }

    //上传按钮html
    function getUploadButtonHtml(obj)
    {
        var specIndex = obj.parent().parent().index();
        var tempUrl = '/index.php?controller=block&action=pic&specIndex=@specIndex@';
        tempUrl     = tempUrl.replace('@specIndex@',specIndex);
        art.dialog.open(tempUrl,
            {
                'id':"uploadIframe",
                'title':'选择图片上传的方式',
                'ok':function(iframeWin, topWin)
                {
                    iframeWin.document.forms[0].submit();
                    return false;
                }
            });
    }

    //根据显示类型返回格式
    function getTr(indexValue)
    {
        var typeValue = $(':radio:checked').val();

        //规格图片格式
        var specInputHtml = getValHtml();
        if(typeValue==2)
            var specInputHtml = getPicHtml();

        //数据
        var specRow = '<tr class="td_c"><td>'+specInputHtml+'</td>'
            +'<td><img class="operator" src="<?php echo isset($skin)?$skin:"";?>/images/icon_asc.gif" alt="向上" />'
            +'<img class="operator" src="<?php echo isset($skin)?$skin:"";?>/images/icon_desc.gif" alt="向下" />'
            +'<img class="operator" src="<?php echo isset($skin)?$skin:"";?>/images/icon_del.gif" alt="删除" />'
            +'</td></tr>';

        return specRow;
    }

    //预定义
    $('#spec_box tr').each(
        function(i)
        {
            initButton(i);
        }
    );


    //展示规格类型(点击绑定)
    $(':radio').click(
        function()
        {
            //获取规格类型
            var typeValue = $(this).val();
            if(typeValue==1)
                $('.border_table thead th:eq(0)').text('规格值');
            else
                $('.border_table thead th:eq(0)').text('规格图片');

            $('#spec_box tr').each(
                function(i)
                {
                    //获取文字数据并进行缓存
                    var specVal = $('#spec_box tr:eq('+i+') input:text').val();
                    if(specVal != $('#spec_box tr:eq('+i+')').data('specVal'))
                    {
                        $('#spec_box tr:eq('+i+')').data('specVal',specVal);
                    }

                    //获取图片数据并进行缓存
                    var specPic = $('#spec_box tr:eq('+i+') input:hidden').val();
                    if(specPic != $('#spec_box tr:eq('+i+')').data('specPic'))
                    {
                        $('#spec_box tr:eq('+i+')').data('specPic',specPic);
                    }

                    //文字方式切换
                    if(typeValue==1)
                    {
                        var specVal = $('#spec_box tr:eq('+i+')').data('specVal');
                        $(this).children('td:first').html(getValHtml(specVal));
                    }

                    //图片方式切换
                    else
                    {
                        var specPic = $('#spec_box tr:eq('+i+')').data('specPic');
                        $(this).children('td:first').html(getPicHtml(specPic));
                    }
                    //重新绑定按钮
                    initButton(i);
                }
            );
        }
    )

    //添加规格按钮(点击绑定)
    $('#specAddButton').click(
        function()
        {
            var specSize = $('#spec_box tr').size();
            console.log('总数',specSize);
            var specRow = getTr(specSize);
            $('#spec_box').append(specRow);
            initButton(specSize);
        }
    )

    //按钮(点击绑定)
    function initButton(indexValue)
    {
        console.log(indexValue);
        //上传图片按钮
        $('#spec_box tr:eq('+indexValue+') td button').click(
            function()
            {
                getUploadButtonHtml($(this));
            }
        );

        //功能操作按钮
        $('#spec_box tr:eq('+indexValue+') .operator').each(
            function(i)
            {
                switch(i)
                {
                    //向上排序
                    case 0:
                        $(this).click(
                            function()
                            {
                                var insertIndex = $(this).parent().parent().prev().index();
                                console.log(insertIndex);
                                if(insertIndex >= 0)
                                {
                                    $('#spec_box tr:eq('+insertIndex+')').before($(this).parent().parent());
                                }
                            }
                        )
                        break;

                    //向下排序
                    case 1:
                        $(this).click(
                            function()
                            {
                                var insertIndex = $(this).parent().parent().next().index();
                                $('#spec_box tr:eq('+insertIndex+')').after($(this).parent().parent());
                            }
                        )
                        break;

                    //删除排序
                    case 2:
                        $(this).click(
                            function()
                            {
                                var obj = $(this);
                               obj.parent().parent().remove();
                            }
                        )
                        break;
                }
            }
        )
    }
</script>

</body>
</html>